import React, {Component} from "react";
import {connect} from "dva";
import time, {currentTime, dateFormat} from "@/utils/time";
import echarts from "echarts";
import {addResizeHook} from "@/utils/resize";
import {Row, message} from "antd";
import {HANFAN_GLOBAL_MAPPING_DICT} from "@/config/appConfig";
import CustomDropdown from "@/pages/GaoLu/components/CoreData/CustomDropdown";


class FuelParam extends Component {

  state = {
    option: {
      tooltip: {
        show: true,
        trigger: "item",
        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
      },
      radar: {
        center: ["50%", "50%"],
        radius: "60%",
        name: {
          textStyle: {
            color: "#01C1DF",
            fontSize: 11
          }
        },
        splitNumber: 4,
        shape: "polygon",
        scale: false,
        splitArea: {
          areaStyle: {
            color: ["transparent"]
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#e6e6e6"
          }
        },
        indicator: [{
          name: "TFE",
        },
          {
            name: "转鼓指数",
          },
          {
            name: "焦炭_FCad",
          },
        ],
      },
      series: [{
        name: '',
        type: "radar",
        areaStyle: {
          normal: {
            color: "#01C1DF",
            opacity: 0.3
          }
        },
        lineStyle: {
          width: 0
        },
        data: [{
          value: []
        }]
      }]
    },
    // selectedParams:[],
    latestKeys: [],
    selectedParams: localStorage.getItem("selectedFuelParams") ? JSON.parse(localStorage.getItem("selectedFuelParams")) : []
  };


  componentDidMount() {
    const {option, selectedParams} = this.state;
    const chart = echarts.init(document.getElementById("fuelParam"));

    option.radar.indicator = selectedParams.map(param => {
      return {name: HANFAN_GLOBAL_MAPPING_DICT[param], id: param}
    });

    if (option.radar.indicator.length ===0 ){
      option.radar.indicator.push(
        {name: '暂无选中项', show: false}
      );
    }

    chart.setOption(option);
    this.state.option = option;
    this.state.chart = chart;

    addResizeHook(this, chart.resize);
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const {currentData} = nextProps;
    const {option, selectedParams, chart} = prevState;
    if (currentData && chart) {
      const array = selectedParams.map(param => {
        return currentData[param]
      });
      option.series[0].data[0] = {value: array};
      chart.setOption(option, true);
    }
  }


  handleParamChange = (keys) => {
    const {option, selectedParams, chart} = this.state;
    // this.state.selectedParams = keys;
    // let newKey = keys.filter(k => this.state.latestKeys.every(lk => lk !== k));
    // this.state.latestKeys = keys;
    // newKey.forEach(key => {
    //   selectedParams.push(key);
    //   if (selectedParams.length > 8) selectedParams.shift()
    // });
    option.radar.indicator = keys.map(param => {
      return {name: HANFAN_GLOBAL_MAPPING_DICT[param], id: param}
    });

    if (option.radar.indicator.length ===0 ){
      option.radar.indicator.push(
        {name: '暂无选中项', show: false}
      );
    }

    const {currentData} = this.props;
    if (currentData) {
      const array = selectedParams.map(param => {
        return currentData[param]
      });
      option.series[0].data[0] = {value: array}
    }

    chart.setOption(option, true);

    localStorage.setItem("selectedFuelParams", JSON.stringify(selectedParams));
    this.setState({selectedParams: keys, option})
  };

  render() {
    const {
      width = 100,
      height = 300,
      chartId
    }
      = this.props;

    return (
      <div>
        <Row>
          <CustomDropdown sectList={
            Object.entries(HANFAN_GLOBAL_MAPPING_DICT).map(([key, desc]) => ({title: desc, id: key}))}
                          onChange={this.handleParamChange} selectedKeys={this.state.selectedParams}
                          maxSelect={8}/>
        </Row>
        <Row>
          <div id={chartId} style={{width: `100%`, height}}/>
        </Row>
      </div>
    )
  }
}


export default connect(({hanfan, global}) => ({
  globalTime: hanfan.globalTime,
  currentData: hanfan.currentData,
  global
}))(FuelParam);
